<template>
	<main-content>
		<view class="content-color">
			<view class="">
				<template v-for="(group,groupI) in viewConfig" :key="groupI">
					<view>
						<view class="p-t-16">
							<!-- <group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						{{groupArr[groupI]}}</group-title> -->
						</view>
						<view class="view-group">
							<view class="view-item p-x-16 p-y-12 flex flex-row justify-between items-center"
								style="border-bottom: 1rpx solid rgba(231, 230, 228, 1);"
								v-for='(item,i) in group.filter(e=>!e.hide)' :key="i">
								<view class="list-title">
									{{item.label}}
									<u-icon name="question-circle-fill" @click="showTipFn(item.tip)"
										v-if='item.tip'></u-icon>
								</view>
								<view class="">
									{{
										item?.customRender ? item.customRender({formData,text:formData[item.dataIndex]}) : formData[item.dataIndex]
									}}
									<u-icon v-if="item.copy" name="copy-fill" custom-prefix="custom-icon"
										:color="maiColor" class="p-l-2" @tap.stop="copy(formData[item.dataIndex])" />
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		<u-popup v-model="showTip" mode="center" width="500rpx" border-radius="14" :closeable='true'>
			<view>
				<view class="p-14">
					<group-title>
						<template #icon>
							<view class="main-color">
								<u-icon name="title-icon" custom-prefix="custom-icon" />
							</view>
						</template>
						提示</group-title>

				</view>
				<view class="p-16">
					{{tipContent}}
				</view>
				<view class="p-16">
					<u-button type="primary" @click="showTip=false">确认</u-button>
				</view>
			</view>
		</u-popup>
	</main-content>
</template>
<script setup name='index'>
	import {
		reactive,
		ref,
		getCurrentInstance,
		computed,
		nextTick
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		ISENABLED,
	} from '@/common/dict.js'
	import {
		selectDictLabel,
		parseTime,
		copy,
		formatToMoney
	} from '@/common/common.js'
	import {
		storeApi
	} from '@/common/api/store/index.js'

	const commonStore = useCommonStore()
	const {
		proxy
	} = getCurrentInstance()

	const maiColor = computed(() => {
		return proxy.$System.maiColor.value
	})
	const initForm = {
		area: undefined, //城市，所属区/县
		no: undefined, //门店账号
		logoImgUrl: undefined, //门店Logo地址
		agentId: undefined, //所属代理商编号
		agentInfo: undefined, //代理商出参
		exhibitionId: undefined, //所属展业人员编号
		remark: undefined, //备注
		cTime: undefined, //创建时间/入网时间
		type: undefined, //门店类型(0:直营;1:加盟)
		storeAbbrName: undefined, //门店简称
		cUserId: undefined, //创建用户编号
		areaCode: undefined, //城市，所属区/县CODE
		uUserId: undefined, //更新用户编号
		areaName: undefined, //城市，所属区/县CODE
		merchantId: undefined, //所属商户编号
		phone: undefined, //电话
		cUserName: undefined, //创建人
		uUserName: undefined, //更新人
		name: undefined, //名字
		storeName: undefined, //门店名称
		uTime: undefined, //更新时间
		id: undefined, //门店编号
		addr: undefined, //地址
		status: undefined, //门店状态(0:禁用;1:启用)
	}
	const formData = ref({
		...initForm
	})

	const groupArr = ['订单基本信息', '订单其他金额信息', '其他信息']
	const viewConfig = ref([
		[{
			label: '状态',
			dataIndex: 'status',
			customRender: (data) => {
				return selectDictLabel(ISENABLED, data.text)
			},
		}, {
			label: '入网时间',
			dataIndex: 'cTime',
			customRender: (data) => {
				return parseTime(data.text)
			},
		}, {
			label: '门店名称',
			dataIndex: 'storeName'
		}],
		[{
			label: '所属代理商',
			dataIndex: 'companyName',
			customRender: ({
				formData,
				text
			}) => {
				return formData?.agentInfo.companyName
			},
		}, {
			label: '代理商等级',
			dataIndex: 'level',
			customRender: ({
				formData,
				text
			}) => {
				return formData?.agentInfo.level
			},
		}, {
			label: '代理商联系人',
			dataIndex: 'agentInfoname',
			customRender: ({
				formData,
				text
			}) => {
				return formData?.agentInfo.name
			},
		}, {
			label: '代理商联系电话',
			dataIndex: 'agentInfophone',
			customRender: ({
				formData,
				text
			}) => {
				return formData?.agentInfo.phone
			},
		}],
		[{
			label: '门店联系人',
			dataIndex: 'name',
		}, {
			label: '门店联系电话',
			dataIndex: 'phone',
		}, {
			label: '门店地址',
			dataIndex: 'area',
			customRender: ({
				formData,
				text
			}) => {
				return `${formData.area}${formData.addr}`
			},
		}, {
			label: '备注',
			dataIndex: 'remark',
		}],
	])

	const queryData = ref({})
	const getForm = () => {
		storeApi.findId(queryData.value).then((res) => {
			if (res.code != 200) return
			formData.value = res.data
		})
	}

	// 显示提示
	const showTip = ref(false)
	const tipContent = ref('')
	const showTipFn = (val = '') => {
		showTip.value = true
		tipContent.value = val
	}

	const initFormView = () => {
		getForm()
	}

	onLoad(async (options) => {
		if (options.id) {
			queryData.value.id = options.id
			initFormView()
		}
	})
	onReady(() => {})
</script>
<style lang='scss' scoped>
	.view-group {
		background-color: #fff;
	}

	.operate-box {
		position: fixed;
		z-index: 99;
		bottom: 50rpx;
	}

	.tar {
		:deep(.u-input) {
			text-align: right !important;
		}
	}
</style>